const HtmlWebpackPlugin = require("html-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader")

const path = require("path")

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "formdesign.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(vue)?$/,
        loader: "vue-loader",
        exclude: /node_modules/,
      },
      // {
      //   test: /\.(scss)$/,
      //   use: [
      //     { loader: "style-loader" },
      //     {
      //       loader: "css-loader",
      //     },
      //     { loader: "sass-loader" },
      //   ],
      // },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              // modules: true,
            },
          },
        ],
      },
      // {
      //   test: /\.(woff2?|woff|eot|ttf|otf)(\?.*)?$/,
      //   loader: 'url-loader',
      //   // options: {
      //   //   limit: 20000,
      //   //   name: 'fonts/[name]-[hash].[ext]'
      //   // }
      // },
      // {
      //   test: /\.(png|jpe?g|gif|webp)$/i,
      //   use: [
      //     {
      //       loader: "url-loader",
      //     },
      //   ],
      // },
    ],
  },
  resolve: {
    extensions: [".jsx", ".vue", ".js", ".json", ".css", ".scss"],
  },
  // externals: {
  //   vue: "Vue",
  //   "element-ui": "element-ui",
  //   "avue": "avue",
  // },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
}
